<template>
  <div class="activity-track-box">
    <div class="tabs">
      <div class="tab-container">
        <van-tabs
          v-model="activeIndex"
          color="#007AE6"
          :line-width="20"
          title-active-color="#007AE6"
          sticky
          animated
          @click="onChange"
          v-show="!shareUuid"
        >
          <van-tab
            v-for="item in tabs"
            :key="item.index"
            :title="item.label"
          ></van-tab>
        </van-tabs>
      </div>
      <div class="tab-box">
        <Tips v-if="unreadCount" :increase="unreadCount" :unit="'条'" @on-click="setRead" />
        <div class="tab-item">
          <van-list
            v-model="loading"
            :finished="finished"
            :immediate-check="false"
            :finished-text="finished && !listInfo.length ? '' : '没有更多了'"
            @load="onLoad"
          >
            <div v-for="(item,index) in listInfo" :key="index">
              <activity-track
                :type="tabItem.value"
                :index="index"
                :item="item"
              ></activity-track>
              <NewestDivider :isBgColor="true" v-if="findIndex == index" :title="`新增${tabItem.key}`" />
            </div>
          </van-list>
        </div>
      </div>
    </div>
    <div class="no-data" v-if="!this.listInfo.length && finished">
      <img src="@/assets/img/dynamics/dynamicsNull.png" alt="">
      <p>暂无{{ this.tabItem.key }}，快去分享吧~ </p>
    </div>
  </div>
</template>
<script>
import ActivityTrack from "COMP/Dynamics/activityTrack"
import DynamicsNull from "COMP/Dynamics/DynamicsNull"
import dynamicsService from "SERVICE/dynamicsService"
import NewestDivider from '@/components/Dynamics/NewestDivider'
import Tips from '@/components/Dynamics/Tips'

const tabs = [
  { index: 0, label: "全部" },
  { index: 1, label: "楼盘" },
  { index: 2, label: "名片" },
  { index: 3, label: "文章" }
]

const tabsParams = {
  0 : { key: "动态", value: 0 },
  1 : { key: "楼盘动态", value: 2 },
  2 : { key: "名片动态", value: 1 },
  3 : { key: "文章动态", value: 3 }
}

export default {
  components: {
    Tips,
    ActivityTrack,
    DynamicsNull,
    NewestDivider
  },
  data () {
    return {
      tabs,
      activeIndex: 0,
      listInfo: [],
      current: 1,
      size: 10,
      loading: false,
      finished: false,
      scrollTop: 0,
      unreadCount: 0,
      findIndex: 0,
      countObj: {}
    }
  },
  created () {
    let { activeIndex, shareUuid, count } = this.$route.query
    this.activeIndex = activeIndex || 0
    this.shareUuid = shareUuid || ''
    this.count = count
    this.getPosition();
  },
  computed: {
    tabItem () {
      return tabsParams[this.activeIndex]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$el.querySelector(".tab-box").scrollTop = this.scrollTop
    })
  },
  methods: {
    /**
     * 获取动态数量
     */
    async getTrackCount () {
      try {
        if (!this.shareUuid) {
          this.countObj = await dynamicsService.getDynamicUnreadCountVo()
          this.setTitle()
        } else {
          let query = { shareUuid: this.shareUuid, sourceType: this.tabItem.value }
          let count = await dynamicsService.getDynamicShareUnreadCount(query)
          this.unreadCount = count
        }
        
      } catch (error) {
        console.log(error)
      }
    },
    upDateDynamicCount() {
    },
    /**
     * 设置title
     */
    setTitle () {
      switch (this.activeIndex) {
        case 0:
          this.unreadCount =this.countObj.totalCount || this.count || 0
          break;
        case 1:
          this.unreadCount =this.countObj.linkerCount || this.count || 0
          break;
        case 2:
          this.unreadCount =this.countObj.cardCount || this.count || 0
          break;
        case 3:
          this.unreadCount =this.countObj.articleCount || this.count || 0
          break;
      }
    },

    /**
     * tab切换
     */
    onChange (index) {
      this.current = 1
      this.finished = false
      this.listInfo = []
      this.setTitle()
      this.onLoad()
    },

    /**
     * 上拉加载
     */
    async onLoad () {
      try {
        this.loading = true
        let result = null
        if (!this.shareUuid) {
          result = await dynamicsService.getAllDynamicListByCustomer(this.current, this.size, this.tabItem.value)
        } else {
          let param = { current: this.current, size: this.size, shareUuid: this.shareUuid, sourceType: this.tabItem.value }
          result = await dynamicsService.getShareDynamicByShareUuid(param)
        }
        this.listInfo = [...this.listInfo, ...result.records]
        this.findIndex = this.listInfo.findIndex(item => !item.ifToday) - 1
        if (this.current >= result.pages) {
          this.finished = true
        } else {
          this.current++
        }
        this.loading = false
      } catch (error) {
        this.loading = false
        this.finished = true
        console.log("error", error)
      }
    },
    /**
     * 设置为已读
     */
    async setRead(){
      try {
        if (!this.shareUuid) {
          await dynamicsService.updateDynamicUnreadCountVo({ sourceType: this.tabItem.value, clientId: 0 })
        } else {
          await dynamicsService.updateDynamicShareUnreadCount({ sourceType: this.tabItem.value, shareUuid: this.shareUuid })
        }
        this.listInfo.forEach(item => {
          item.unreadDynamicCount = 0
        });
        this.unreadCount = 0
        this.getTrackCount()
      } catch (error) {
        
      }
    },
    /**
     * 获取保存位置
     */
    getPosition () {
      try {
        let data = sessionStorage.getItem("listInfo")
        if (data) {
          let obj = JSON.parse(data)
          for (const key in obj) {
            this[key] = obj[key]
          }
          // this.setTitle()
          sessionStorage.removeItem("listInfo")
        } else {
          this.onLoad()
        }
        this.getTrackCount()
      } catch (error) {
        console.log(error)
      }
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name === "custom-detail" || to.name === "message") {
      this.scrollTop = document.querySelector(".tab-box").scrollTop
      sessionStorage.setItem("listInfo", JSON.stringify(this.$data))
    }
    next()
  }
}
</script>
<style lang="less" scoped>
.activity-track-box {
  background: rgba(247, 249, 250, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  .tabs {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    flex: 1;
  }
  .tab-box {
    flex: 1;
    overflow: scroll;
  }
  .no-data {
    width: 100%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    font-size: 12px;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    text-align: center;
    height: 17px;
    line-height: 17px;
    img {
      width: 88px;
      height: 88px;
    }
  }
  .van-tabs__line {
    bottom: 0.57rem;
    border-radius: 2px;
  }
}
</style>
